<template>
	<!-- 登录页面 -->
	<view>
		<view class="avatar">
			<image src="/static/login_form_icons/logo.png" class="logo"></image>
		</view>
		<form @submit="formSubmit" @reset="formReset" class="register-form-container">

			<view class="title">
				<text>忘记密码</text>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/phone.png" class="icon"></image>
				<input class="form-input" v-model="phone" type="number" placeholder="请输入手机号" />
			</view>
			<view class="checkcode">
				<image src="/static/login_form_icons/code.png" class="icon"></image>
				<input class="form-input-code" name="code" type="number" placeholder="请输入验证码" />
				<text>|</text>
				<button @click.stop="getCheckCode" class="code" :disabled="waitCode"> {{codeText}}</button>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="password" :type="passwordType" placeholder="请输入新密码" />
				<image v-show="showPwd" src="/static/hidden-eye.png" @click.stop="showKey" class="eye"></image>
				<image v-show="!showPwd" src="/static/show-eye.png" @click.stop="showKey" class="eye"></image>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="newpassword" :type="passwordType1" placeholder="请输入确认密码" />
				<image v-show="showPwd1" src="/static/hidden-eye.png" @click="showKey1" class="eye"></image>
				<image v-show="!showPwd1" src="/static/show-eye.png" @click="showKey1" class="eye"></image>
			</view>
			<view class="form-item">
				<button class="form-btn" form-type="submit">重置密码</button>
			</view>
		</form>
	</view>
</template>

<script>
	import graceChecker from "@/common/graceChecker.js"
	export default {
		data() {
			return {
				passwordType: 'password',
				passwordType1: 'password',
				formData: {},
				showPwd: true,
				showPwd1:true,
				waitCode: false,
				// seconds: 60,
				codeText: '获取验证码',
				phone: ""
			}
		},
		methods: {
			showKey() {
				this.showPwd = !this.showPwd
				this.passwordType = this.showPwd ? 'password' : 'text'
			},
			showKey1() {
				this.showPwd1 = !this.showPwd1
				this.passwordType1 = this.showPwd1 ? 'password' : 'text'
			},
			async getCheckCode() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.phone)) { //判断手机号格式时候正确
					uni.showToast({
						title: '手机号格式不正确！',
						icon: 'none'
					})
					return
				}
				const data = await uni.$H.get('/phoneCode', {
					phone: this.phone
				}, {
					authCode: false
				})
				if (data.status == 0) {
					this.waitCode = true
					uni.$showMsg('验证码已发送，请注意查收')
					let count = 60
					this.codeText = count + 's'
					let countDown = setInterval(() => {
						count--
						this.codeText = count + 's'
						if (count < 0) {
							clearInterval(countDown)
							this.codeText = '重新发送'
							this.waitCode = false
						}
					}, 1000)
				} else {
					uni.$showMsg(data.message)
				}
				// 
				//获取验证码
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			formSubmit: function(e) {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.phone)) { //判断手机号格式时候正确
					uni.showToast({
						title: '手机号格式不正确！',
						icon: 'none'
					})
					return
				}
				console.log(e.detail.value)
				let formData = e.detail.value
				const loginRule = [
					{
						name: "code",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "验证码不能为空！"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "密码不能为空！"
					},
					{
						name: "newpassword",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "确认密码不能为空！"
					}
				]
				let checkRes = graceChecker.check(formData, loginRule)

				if (checkRes) {
					if (formData.newpassword !== formData.password) {
						uni.$showMsg("两次密码输入不同！", "error")
					} else {
						// 验证通过业务
						// formData.wxId = uni.getStorageSync('openId')
						this.fecthData(formData)
					}
				} else {
					// 验证失败业务
					uni.showToast({
						title: graceChecker.error,
						icon: "error"
					});
				}
			},
			async fecthData(form) {
				let _push_form = {}
				_push_form.phone = this.phone
				_push_form.password = form.password
				_push_form.phoneCode = form.code
				const res = await uni.$H.post('/user/updateUserPasswordByPhoneCode', _push_form, {
					authCode: true
				})
				if (res.status == 0) {
					uni.$showMsg('密码修改成功，请重新登录！')
				} else {
					return uni.$showMsg(res.message)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		margin-top: 69rpx;
		margin-left: 327rpx;
		margin-bottom: 100rpx;

		.logo {
			height: 120rpx;
			width: 110rpx;
		}
	}

	.register-form-container {
		.forgetpwd {
			position: relative;
			left: 566rpx;
			color: #515151;
			font-weight: bold;
			font-size: 24rpx;
		}
	}

	.title {
		margin-left: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 76rpx;
	}

	.checkcode {
		display: flex;
		flex-direction: row;
		margin: 0rpx 50rpx 0 50rpx;
		background: #F4F4F4;
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 44rpx;
		height: 88rpx;
		align-items: center;

		.code {
			width: 200rpx;
			color: #2767EA;
			text-align: center;
			font-size: 26rpx;
			background-color: #F4F4F4;
			// border: 1rpx dashed transparent !important;

		}

		.code::after {
			border: none;
		}

		.icon {
			position: absolute;
			height: 30rpx;
			width: 22rpx;
			margin-left: 30rpx;
		}

		.form-input-code {
			padding-left: 60rpx;
			margin-bottom: 40rpx;
			padding-top: 44rpx;
			height: 80rpx;

		}
	}


	.form-item {
		display: inline-flexbox;
		flex-direction: row;
		margin-top: 44rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		position: relative;

		// justify-content: space-between;
		.icon {
			position: absolute;
			height: 30rpx;
			width: 22rpx;
			margin-top: 28rpx;
			margin-left: 30rpx;
		}

		.eye {
			position: absolute;
			width: 41rpx;
			height: 28rpx;
			top: 30rpx;
			right: 90rpx;
		}

		.form-input {
			padding-left: 60rpx;
			margin-bottom: 40rpx;
			height: 88rpx;
			background: #F4F4F4;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.form-btn {
			height: 88rpx;
			width: 100%;
			margin-top: 105rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
		}
	}

	.confirm {
		position: absolute;
		bottom: 114rpx;
		left: 78rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;

		.font {
			color: #E62029;
		}
	}
</style>
